<script setup lang="ts"></script>

<template>
  <div class="p-4">
    <div class="text-3xl center">
      这里是message使用案例
    </div>
    <div class="grid gap-4 p-4">
      <BaseButton class="text-xs" @click="() => message.success('这个是最普通最简单success的用法，不含title')">
        1. 这个是最普通最简单success的用法，不含title
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.error('这个是最普通最简单的用法，不含title')">
        2. 这个是最普通最简单error的用法，不含title
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.money({ type: 'success', title: '测试', label: '测试', amount: 1000 })">
        3. 有涉及金额的用这个，不满足的请自己写h函数，基础组件不过度封装了
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.money({ type: 'success', title: '测试', label: '测试', amount: 1000, showIcon: true, currencyType: 'USDT' })">
        4. 涉及金额且需要展示图标icon
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.success({ title: '测试', content: '这个是带标题的成功提示' })">
        5. 这个是带标题的成功提示
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.error({ title: '测试', content: '这个是带标题的错误提示' })">
        6. 这个是带标题的错误提示
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.error({ title: '测试', content: h('div', { class: 'text-red-500' }, '我是自定义内容') })">
        7. 这个是h函数的用法，内容可以自定义
      </BaseButton>
      <BaseButton class="text-xs" @click="() => message.onlyMsg('1111')">
        8. 这个是没有左边图标，onlyMsg的用法
      </BaseButton>
      <div class="mt-10">
        代码请到notice.vue查看
      </div>
    </div>
  </div>
</template>
